<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="上传文件"
        width="800px"
    >
        <div class="upload-file-page">
            <div slot="tip" class="upload-title">
                <div class="upload-button">
                    <el-button type="text">只能上传 {{ suffixes }} 文件，所有文件大小合计不超过 {{ fileSize }} </el-button>
                </div>
                <div class="upload-button">
                    <el-upload ref="upload" action="" :show-file-list="false" :auto-upload="false" multiple
                               :accept="suffixes" :limit="limit" :on-exceed="handleExceed" :on-change="handleChange">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </div>
                <div class="upload-button">
                    <el-button type="primary" @click="submitFile" :class="dataList.length<1?'el-button_disabled':''"
                               :disabled="dataList.length<1" v-loading.fullscreen.lock="loading" >开始上传</el-button>
                </div>
            </div>
            <div class="upload-file">
                <div v-for="item in dataList" class="show-file">
                    <img :src="item.imageUrl" alt="" v-if="['jpg','png','gif','ico'].includes(item.suffix)">
                    <div class="show_file_name" @click="$common.downloadFile(item.id)">{{ item.fileName }}（{{ item.fileSize }}）</div>
                    <el-button class="el-icon-error" type="text" @click="deleteFile(item)"></el-button>
                </div>
            </div>
            <div class="edit_button">
                <el-button type="primary" @click="resetForm">关闭</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import PageList from "@/components/grid/pageList";

export default {
    name: "uploadFile",
    components: {PageList},
    props: {
        visible: Boolean,
        suffixes: String,
        limit: {
            type: Number,
            default: 0,
        },
        fileSize: {
            type: String,
            default: "500M",
        },
    },
    data() {
        return {
            height: '500px',
            loading: false,
            dataList: [],
            indexId: 1,
        }
    },
    methods: {
        handleChange(file) {
            let suffixes = this.suffixes.toLowerCase();
            let fileName = file.name;
            let fileSize = file.size;
            let imageUrl = this.$common.showImage(file.raw);
            let idx = fileName.lastIndexOf(".");
            let ext = "";
            if (idx !== -1) {
                ext = fileName.substr(idx + 1).toLowerCase();
            }
            if (suffixes != "*") {
                if (suffixes.indexOf(ext) < 0) {
                    this.$message.error('选择文件类型不对，请选择' + suffixes + '的文件！');
                    return;
                }
            }
            let temp = {indexId: this.indexId, imageUrl: imageUrl, fileName: fileName, fileSize: fileSize, suffix: ext, file: file.raw}
            this.dataList.push(temp);
            this.indexId++;
        },
        handleExceed(files) {
            if (this.limit > 0 && files.length != this.limit) {
                this.$message.error('最多只能选择【' + this.limit + '】个文件！');
                return;
            }
            if (this.limit > 0 && this.dataList.length != this.limit) {
                this.$message.error('最多只能选择【' + this.limit + '】个文件！');
                return;
            }
            let suffixes = this.suffixes.toLowerCase();
            for (let i = 0 ; i < files.length ; i++) {
                let fileName = files[i].name;
                let fileSize = files[i].size;
                let imageUrl = this.$common.showImage(file.raw);
                let idx = fileName.lastIndexOf(".");
                let ext = "";
                if (idx !== -1) {
                    ext = fileName.substr(idx + 1).toLowerCase();
                }
                if (suffixes != "*") {
                    if (suffixes.indexOf(ext) < 0) {
                        this.$message.error('选择文件类型不对，请选择' + suffixes + '的文件！');
                        return;
                    }
                }
                let temp = {indexId: this.indexId, imageUrl: imageUrl, fileName: fileName, fileSize: fileSize, suffix: ext, file: files[i].raw}
                this.dataList.push(temp);
                this.indexId++;
            }
        },
        submitFile() {
            if (0 === this.dataList.length) {
                this.$message.error('请选择要上传的文件');
                return;
            }
            let formData = new FormData();
            this.dataList.forEach((file) => {
                formData.append("files", file.file);
            })
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseUploadFile/upload", formData).then(res => {
                this.resetForm(res.data);
            }).finally(() => {
                this.loading = false;
            });
            
        },
        deleteFile(row) {
            this.dataList = this.dataList.filter(item => item.indexId !== row.indexId);
        },
        resetForm(data) {
            this.dataList = [];
            this.$emit('change', data);
            this.$emit('update:visible', false);
        }
    }
}
</script>

<style lang="scss">

.upload-file-page {

    .upload-title {
        .upload-button {
            width: auto;
            margin: 0 10px 0 0;
            float: left;
        }
    }

    .upload-file {
        border: #cccccc solid 1px;
        min-height: 50px;
        max-height: 500px;
        padding: 0;
        margin: 10px;

        .show-file {
            margin: 10px;

            img {
                width: 40px;
                height: 30px;
                float: left;
                margin-left: 10px;
            }

            .show_file_name {
                width: auto;
                height: 20px;
                line-height: 20px;
                float: left;
                font-size: 16px;
                margin-left: 10px;
                cursor: pointer;
                color: #409EFF;
            }

            .el-icon-error {
                color: red;
                font-size: 16px;
                padding: 2px;
                margin: 0;
            }
        }

    }

    .edit_button {
        width: auto;
        float: right;

        .el-button{
            margin-left: 10px;
        }
    }
}

</style>